<div *ngIf="category" class="card shadow mb-4 bg-primary-light" id="accordion">
    <div class="card-body row d-flex align-items-center" [ngClass]="{'collapsed pointer': !noExpand}" id="headingOne" [attr.data-toggle]="!noExpand ? 'collapse' : null"
        [attr.data-target]="'#'+category.symbol" aria-expanded="false" [attr.aria-controls]="category.symbol">
        <div *ngIf="category.symbol" class="col-5">
            <i class="ti- mr-2"></i>
            {{category.categoryOfInvolvement}}
        </div>
        <ng-container *ngIf="categoryHasInvolvement(category)">
            <div class="col-2">
                {{(getRevenuePercentage(category))}}%
            </div>
            <div class="col-3">
                {{getRevenueAnalysisSource(category)}}
            </div>
            <div class="col-1">
                {{getFinancialYear(category)}}
            </div>
        </ng-container>
        <ng-container>
            <div class="col-2">
            </div>
            <div *ngIf="!categoryHasInvolvement(category)" class="col-5">
                No Involvement
            </div>
        </ng-container>
    </div>

    <div *ngIf="categoryHasInvolvement(category)" [attr.id]="category.symbol" class="collapse mt-4 bg-primary-light" aria-labelledby="headingOne"
        data-parent="#accordion">
        <div *ngIf="category">
            <div class="text-center pt-3 indicator-name">
                <hr />
                <div *ngIf="category.description" class="pl-5 pr-5 pt-2">
                    {{ category.description }}
                </div>
                <hr />
            </div>
            <div class="card-body row indicator-details">
                <div>
                    <h6> Product Involvement Analysis </h6>
                    <p>{{ getProductInvolvementAnalysis(category) }}</p>
                </div>
            </div>
            <div class="card-body row indicator-details">
                <div>
                    <h6> Revenue Analysis </h6>
                    <p>{{ getRevenueAnalysis(category) }}</p>
                </div>
            </div>
            <div class="card-body row indicator-details">
                <div>
                    <h6> Sources </h6>
                    <div *ngFor="let source of getSources(category)">
                        <p>{{ source.name }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>